<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<table>
    <tr>
        <td align="center" colspan="6"><h1>航班查询</h1></td>
    </tr>
    <tr>
        <td  colspan="6">
            <form action="index.html" method="post">
                日期：<input name="time" th:value="${param.time}">
                城市：从<input name="off" th:value="${param.off}">到<input name="arrive" th:value="${param.arrive}"><input type="submit" value="搜索">
            </form>
        </td>
    </tr>
    <tr bgcolor="yellow">
        <td>航空公司/航班<br/>机型</td>
        <td>起降时间</td>
        <td>机场</td>
        <td>飞行时长</td>
        <td>经停</td>
        <td>参考报价</td>
    </tr>
    <tr th:if="${flights==null}">
        <td align="center" colspan="6"><h1>没有找到任何航班信息</h1></td>
    </tr>
    <tr th:if="${flights!=null}" th:each="f:${flights}" th:bgcolor="${fStat.index%2==0?'yellow':''}" th:id="${'tr-'+f.id}">
        <td th:utext="${f.company+f.fligntNum+'<br/>'+f.flightType}">航空公司/航班<br/>机型</td>
        <td th:utext="${#dates.format(f.offTime, 'HH:mm')+'<br/>'+#dates.format(f.arriveTime, 'HH:mm')}">起降时间</td>
        <td th:utext="${f.offAirport+'<br/>'+f.arriveAirport}">机场</td>
        <td th:text="${f.timeLength}">飞行时长</td>
        <td th:text="${f.stopover==''?'无经停':f.stopover}">经停</td>
        <td><span th:text="${'￥'+f.price}"></span><br/><input type="button" value="查询机票" th:onclick="ticket([[${f.id}]])"></td>
    </tr>
</table>
<script type="text/javascript">
    function ticket(id){
        if($(".add-"+id).length>0){
            $(".add-"+id).remove();
        }else{
        $.ajax({
            url:"ticket.html",
            data:"id="+id,
            method:"post",
            success:function(json){
                $(".add-"+id).remove();
                var color=$("#tr-"+id).css("background-color");
                var html="";
                $.each(json,function(i,obj){
                    var tr="<tr style='background-color: "+color+"' class='add-"+id+"'>" +
                            "<td colspan='2'>"+obj.agent+"</td>"+
                            "<td colspan='2'>￥"+obj.price+"</td>"+
                            "<td colspan='2'></td>"+
                        "</tr>";
                    html+=tr;
                });
                $("#tr-"+id).after(html);
            }
        })}
    }
</script>
</body>
</html>